<template>
  <div>
    <math-jax :latex="formula" style="font-size: 1.3em" />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { MathJax } from "mathjax-vue3";
import { Param } from "../flowchart/models";
import { specialFormat } from "@/components/flowchart/special/specialappearances"
function sFormat(template: string) {
  return (data: Param[]) => {

    for (const param of data) {
      const paramName = param.name;
      template = template.replaceAll(`$\{${paramName}}`, param.value);
    }
    return template;
  };
}
export default defineComponent({
  props: {
    expr: {
      type: String,
      required: true,
    },
    paramValues: {
      type: Array as PropType<Param[]>,
    },
  },
  components: {
    MathJax,
  },
  computed: {
    formula() {
      if (this.paramValues == null) {
        return this.expr;
      } else {
        if (this.expr.toLowerCase().startsWith("specialformat:")) {
          const formatType = this.expr.split(":")[1].trim()
          return specialFormat(formatType, this.paramValues)
        } else {
          return sFormat(this.expr)(this.paramValues);
        }
      }
    },
  },
});
</script>

<style>
</style>